<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/detail.css" type="text/css"/>
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jtopo-0.4.8-min.js"></script>
    <script src="../plugin/jtopo.edit.js"></script>
    <script>
        $(function(){
            var data = {title:"资源列表",list:[{typeid:"type1",typename:"网路设备",nodes:[{id:"node1",caption:"caption1",url:"../demo_nodes_icon/firwall.png"},
                {id:"node2",caption:"caption2",url:"../demo_nodes_icon/Router1.png"}]},
                {typeid:"type2",typename:"主机设备",nodes:[{id:"host_node3",caption:"caption2",url:"../demo_nodes_icon/Hub1.png"},
                    {id:"node333",caption:"caption1",url:"../demo_nodes_icon/sun.png"}]}
            ]}

            var topoData ={
                types:[
                    {typeid:"",typename:"",nodes:[{id:"",caption:"",imgUrl:"",x:"",y:""},{id:"",caption:"",imgUrl:"",x:"",y:""}]},
                    {typeid:"",typename:"",nodes:[{id:"",caption:"",imgUrl:"",x:"",y:""},{id:"",caption:"",imgUrl:"",x:"",y:""}]}
                ],
                links:[{fromid:"",toid:""},{fromid:"",toid:""},{fromid:"",toid:""}]
            }
            var temp = null;
          //  temp = {"types":[{"typeid":"type1","nodes":[{"imgUrl":"../demo_nodes_icon/Router1.png","id":"node2","caption":"caption2","data":"undefined","x":190,"y":103},{"imgUrl":"../demo_nodes_icon/firwall.png","id":"node1","caption":"caption1","data":"undefined","x":383,"y":115}]},{"typeid":"type2","nodes":[{"imgUrl":"../demo_nodes_icon/sun.png","id":"node333","caption":"caption1","data":"undefined","x":179,"y":286}]}],"links":[{"fromid":"node2","toid":"node1","isFoldLine":false},{"fromid":"node333","toid":"node1","isFoldLine":false}]};
           temp =
           {"types":[{"typeid":"type1","nodes":[{"imgUrl":"https://www.baidu.com/img/bdlogo.png","id":"node2","caption":"caption2","x":149,"y":356},{"imgUrl":"../demo_nodes_icon/firwall.png","id":"node1","caption":"caption1","x":502,"y":236}]},{"typeid":"type2","nodes":[{"imgUrl":"../demo_nodes_icon/sun.png","id":"node333","caption":"caption1","x":262,"y":168},{"imgUrl":"../demo_nodes_icon/Hub1.png","id":"host_node3","caption":"caption2","x":335,"y":321}]}],"links":[{"fromid":"node1","toid":"host_node3","isFoldLine":false},{"fromid":"node333","toid":"host_node3","isFoldLine":false},{"fromid":"node2","toid":"host_node3","isFoldLine":false}]};


            $topo = $("#container").topoEdit(data,null);

            $("input").click(function(){
                var data =  $topo.getTopoData();
                console.info(data);
                $("#divData").html(data);
            })
        });
    </script>
</head>
<body>
<div id="container" style="width:900px;height:500px"></div>
<input type="button" value="getNode"/>
<div id="divData" style="border:1px solid #000000" ></div>
</body>
</html>